<template>
  <section>
    <fieldset>
        <legend>增加学生</legend>
        <div>姓名：<input type="text" v-model="formData.name"></div>
        <div>年龄：<input type="number" v-model.number="formData.age"></div>
        <div>性别：
            男<input type="radio" value="男" name="sex" v-model="formData.sex">
            女<input type="radio" value="女" name="sex" v-model="formData.sex">
        </div>
        <button @click="handleAdd">添加</button>
    </fieldset>
    <h3>学生列表</h3>
    <ol>
        <li v-for="item in $store.state.stus" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
    <h3>女生列表（computed）</h3>
    <ol>
        <li v-for="item in girls"  :key="item.name">{{item.name}}</li>
    </ol>
    <h3>女生列表（getters）</h3>
    <ol>
        <li v-for="item in $store.getters.girlList"  :key="item.name">{{item.name}}</li>
    </ol>
    <p>女生数量（computed）：{{girlsSize}}</p>
    <p>女生数量（getters）：{{$store.getters.girlListSize}}</p>
    <h3>学生列表（性别切换）</h3>
    <ol>
        <li v-for="item in $store.getters.getListAsSex(sexIndex % 2 == 0 ? '男' : '女')" :key="item.name">{{item.name}}</li>
    </ol>
    <button @click="sexIndex ++">切换</button>
    <h3>查询学生列表</h3>
    <div>
        性别：
        <select v-model="queryForm.sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        年龄：
        <input v-model="queryForm.age">
    </div>
    <ol>
        <li v-for="item in $store.getters.getListAsSexAndAge(queryForm.sex,queryForm.age)" :key="item.name">{{item.name}}</li>
    </ol>
  </section>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: "",
                age: "",
                sex: "",
            },
            queryForm: {
                sex: "男",
                age: 24,
            },
            sexIndex: 0
        }
    },
    methods: {
        handleAdd() {
            this.$store.commit("addStu",this.formData);
        }
    },
    computed: {
        girls() {
            return this.$store.state.stus.filter(v => v.sex == "女");
        },
        girlsSize() {
            return this.girls.length;
        }
    },
}
</script>

<style scoped>

</style>